<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中华冷兵器</title>
    <!-- basic -->
    <link rel="stylesheet" href="../css/article-basic.css">
    <link rel="stylesheet" href="../css/util-footer.css">
    <!-- component -->
    <link rel="stylesheet" href="../css/component-myscorll.css">
    <link rel="stylesheet" href="../css/foot.css">
    <!-- util -->
    <link rel="stylesheet" href="../css/mouse-celect.css">
</head>

<body>
    <div class="main" id="articleVue">
        <div class="blackground"></div>
        <div class="lefttopyellowbar"></div>
        <div class="nav">
            <div class="left">
                <img src="../img/article/Icon metro-fire.png" alt="">
                <a href="../index.html"><span>首页</span></a>
                <img src="../img/article/组 71.png" alt="">
                <a href="../html/forum.html"><span>论坛</span></a>
                <img src="../img/article/组 71.png" alt="">
                <span>文章</span>
            </div>
            <div class="right">
                <a href="../html/history.html"><span>历史</span>
                    <div class="shapeHover"></div>
                    <div class="shapeHover1"></div>
                </a>
                <a href=""><span>工艺</span>
                    <div class="shapeHover"></div>
                    <div class="shapeHover1"></div>
                </a>
                <a href=""><span>展览</span>
                    <div class="shapeHover"></div>
                    <div class="shapeHover1"></div>
                </a>
                <a href=""><span>文创</span>
                    <div class="shapeHover"></div>
                    <div class="shapeHover1"></div>
                </a>
                <img src="../img/article/Icon ionic-ios-options.png" alt="">
            </div>
        </div>
        <div class="main-title">
            <h1>为什么冷兵器会产生相应的价值观文化，现代武器没有？</h1>
        </div>
        <div class="main-content">
            <!-- 滚动条 -->
            <div class="myscorll scroll-1">
                <!-- 第一个节点要写成ball -->
                <div class="ball"></div>
                <div class="way"></div>
            </div>
            <div class="box">
                <!-- 所有的段落循环渲染 -->
                <p v-for="p in mainContent">{{p}}</p>
            </div>
            <div class="sub-screen"></div>
            <!-- <img src="../img/article/Icon ionic-ios-heart-dislike.png" alt="" class="like-this"> -->
        </div>
        <div class="remark">
            <!-- 滚动条 -->
            <div class="myscorll scroll-2">
                <!-- 第一个节点要写成ball -->
                <div class="ball"></div>
                <div class="way"></div>
            </div>
            <div class="remark-view">
                <!-- 一个用户评论 -->
                <div class="userCommon" v-for="(common, index) in commonList">
                    <img src="" :src="common.headImgSrc" alt="" class="head-img">
                    <h6 class="title">{{common.userName}}</h6>
                    <p class="commonContent">{{common.userContent}}</p>
                    <div class="detial">
                        <img src="../img/article/Icon awesome-heart.png" alt="" @click="likethis(index)"
                            v-if="common.likeThis" class="likeBtn">
                        <img src="../img/article/Icon ionic-ios-heart-dislike.png" @click="likethis(index)"
                            v-else="common.likeThis" class="likeBtn">
                        <img src="../img/article/Icon material-comment.png" alt="">
                        <span>{{common.time}}</span>
                    </div>
                    <div class="hr"></div>
                    <!-- 评论回复 -->
                    <div class="reCommon" v-for="(re, j) in common.recommonList">
                        <img src="" :src="re.headImgSrc" alt="" class="head-img">
                        <h6 class="title">
                            {{re.userName}}
                            <img src="../img/article/Icon feather-repeat.png" alt="">
                            {{re.sendToName}}
                        </h6>
                        <p class="commonContent">{{re.msg}}</p>
                        <div class="detial">
                            <img src="../img/article/Icon awesome-heart.png" alt="" v-if="re.likeThis" class="likeBtn"
                                @click="likethisMore(index, j)">
                            <img src="../img/article/Icon ionic-ios-heart-dislike.png" alt="" v-else="re.likeThis"
                                class="likeBtn" @click="likethisMore(index, j)">
                            <img src="../img/article/Icon material-comment.png" alt="">
                            <span>{{re.time}}</span>
                        </div>
                        <div class="hr"></div>
                    </div>
                    <img src="../img/article/icons8-皇家海军陆战队-96.png" alt="" class="more"
                        v-if="common.recommonList.length > 1">
                </div>
            </div>

        </div>
        <!-- 
            右侧的区域 50%
         -->
        <div class="right-tips">
            <!-- 第一个元素不动 -->
            <div class="small-tip">
                <div class="tip">
                    <img src="../img/article/24.png" alt="">
                    <p>有一种武器，前端是刀，后面是铁链连着，使用时拿着铁链甩刀子，这种武器应该叫什么？</p>
                </div>
            </div>
            <div class="middle-tip">
                <div class="tip">
                    <img src="../img/article/19.png" alt="">
                    <p>为什么三国演义里小村里的铁匠可以打造出青龙偃月刀、丈八蛇矛这种史诗级武器？</p>
                </div>
            </div>
            <div class="small-tip">
                <div class="tip">
                    <img src="../img/article/23.png" alt="">
                    <p>同样是冷兵器，为什么古代的贵客都喜欢佩剑而不是佩刀？</p>
                </div>
            </div>
            <!-- <img src="../img/article/椭圆 8.png" alt="" class="circle"> -->
            <div class="circle"></div>
            <!-- 像钢琴一样的白条 -->
            <div class="whiteBarArr">
                <div class="whiteBar"></div>
                <div class="whiteBar"></div>
                <div class="whiteBar"></div>
                <div class="whiteBar"></div>
                <div class="whiteBar"></div>
                <div class="whiteBar"></div>
                <div class="whiteBar"></div>
                <div class="whiteBar"></div>
                <div class="whiteBar"></div>
                <div class="whiteBar"></div>
                <div class="whiteBar"></div>
                <div class="whiteBar"></div>
                <div class="whiteBar"></div>
            </div>

        </div>
    </div>
    <div class="foot" style="background-image: url('../img/foot/未命名的设计\ \(2\).png')">
        <div class="word">
            <img src="../img/foot/word.png" alt="">
        </div>
        <div class="foot_box">
            <div class="foot_nav">
                <ul>
                    <li><a href="../html/forum.html">论坛
                            <div class="shapeHover"></div>
                            <div class="shapeHover1"></div>
                        </a></li>
                    <li><a href="../html/history.html">历史
                            <div class="shapeHover"></div>
                            <div class="shapeHover1"></div>
                        </a></li>
                    <li><a href="#">工艺
                            <div class="shapeHover"></div>
                            <div class="shapeHover1"></div>
                        </a></li>
                    <li><a href="#">文创
                            <div class="shapeHover"></div>
                            <div class="shapeHover1"></div>
                        </a></li>
                </ul>
            </div>
            <div class="foot_imgs">
                <img src="../img/icon/Icon awesome-facebook(1).png" alt="">
                <img src="../img/icon/Icon awesome-qq(1).png" alt="">
                <img src="../img/icon/Icon simple-wechat(1).png" alt="">
                <img src="../img/icon/Icon simple-googlehangoutschat(1).png" alt="">
                <img src="../img/icon/Icon simple-letterboxd(1).png" alt="">
            </div>
            <div class="foot_search">
                <input type="text" placeholder="请输入关键字">
                <img src="../img/icon/Icon awesome-search.png" alt="">
            </div>
        </div>
    </div>
</body>
<!-- vue -->
<script src="../js/vue.js"></script>

<!-- js -->
<script src="../js/article.js"></script>
<script src="../js/util.js"></script>
<script src="../js/article-util.js"></script>
<script src="../js/mouse.js"></script>

</html>